<template>
	<view class="box">
		<view class="listbox">
			<text>头像</text>
			<view class="lrftbox" @click="changeimg">
				<image :src="img" mode=""></image>
				<view class="angle"></view>
			</view>
		</view>
		<view class="listbox" @click="changepasssword">
			<text>修改密码</text>
			<view class="lrftbox">
				<view class="angle"></view>
			</view>
		</view>
		<view class="listbox" @click="retreat">
			<text>退出登录</text>
			<view class="lrftbox">
				<view class="angle"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		changeheadimg
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				img: ""
			}
		},
		methods: {
			changepasssword() {
				this.jumpLink({
					link: "/pagesA/changepassword/index"
				})
			},
			// 修改头像
			changeimg() {
				let _this = this;
				uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
					count: 1, //默认选择1张图片
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					success: (res) => {
						// console.log(res.tempFilePaths[0]); //成功则返回图片的本地文件路径列表 tempFilePaths
						uni.uploadFile({ //将本地资源上传到开发者服务器
							url: 'http://youjialibo.wm76.mtnet.ren/api/upload/upload_field', //接口地址
							filePath: res.tempFilePaths[0], //图片地址
							name: 'file',
							// formData: {
							// 	access_token: uni.getStorageSync('access_token'), //加入token
							// },
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								_this.img = 'http://youjialibo.wm76.mtnet.ren' + data.data.url
								changeheadimg({
									head_img: _this.img
								}).then(res => {
									uni.showToast({
										title: res.msg,
										icon: "success",
										duration: 2000
									})
								})
								// if (data.code == 200) {
								// 	this.my_avatar = data.data.url; //上传成功后返回的图片地址
								// }
							}
						});
					}
				});
			},
			//退出登录 
			retreat() {
				uni.showModal({
					title: "提示",
					content: "是否退出登录",
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: "退出中",
							});
							uni.clearStorage();
							this.$store.commit("changeCheckLogin", false);
							this.$store.commit("setUserInfor", null);
							setTimeout(() => {
								uni.hideLoading();
								uni.switchTab({
									url: "../../pages/homepage/index"
								})
							}, 500);
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			}
		},
		onLoad(v) {
			// console.log(v)
			this.img = v.img
		}
	}
</script>

<style scoped lang="scss">
	.box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;

		.listbox {
			display: flex;
			justify-content: space-between;
			height: 110rpx;
			border-bottom: 1rpx solid #f0f0f0;
			line-height: 110rpx;

			// padding: 20rpx;
			// box-sizing: border-box;
			text {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #000000;
				margin-left: 20rpx;
			}

			.lrftbox {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				image {
					width: 73rpx;
					height: 73rpx;
					border-radius: 73rpx;
				}

				.angle {
					width: 20rpx;
					height: 20rpx;
					border-top: 1px solid #000;
					border-left: 1px solid #000;
					transform: rotate(135deg);
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
